<template>
  <div class="page-container page-container-detail-page">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>优惠券</el-breadcrumb-item>
        <el-breadcrumb-item>优惠券详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="page-container-detail">
      <p class="pageName">优惠券详情</p>

      <div class="toolbar">
        <el-form :size="size" ref="filters" class="border">
          <div class="toolbar flex">
            <el-form-item class="toolbar-model">
              <span class="color999 font18 textColor333">优惠券名称：</span>
              <span class="color333 font18">{{ data.promName }}</span>
            </el-form-item>
            <el-form-item class="toolbar-model">
              <span class="color999 font18 textColor333">优惠券ID：</span>
              <span class="color333 font18">{{ data.promotionId }}</span>
            </el-form-item>
            <el-form-item class="toolbar-model">
              <span class="color999 font18 textColor333">当前状态：</span>
              <span class="color333 font18" v-if="data.status == 9"
                >活动草稿</span
              >
              <span class="color333 font18" v-else-if="statusFormat(data) == 11"
                >待提交</span
              >
              <span class="color333 font18" v-else-if="statusFormat(data) == 12"
                >待审核</span
              >
              <span class="color333 font18" v-else-if="statusFormat(data) == 13"
                >未开始</span
              >
              <span class="color333 font18" v-else-if="statusFormat(data) == 14"
                >审核未通过</span
              >
              <span class="color333 font18" v-else-if="statusFormat(data) == 15"
                >进行中</span
              >
              <span class="color333 font18" v-else-if="statusFormat(data) == 16"
                >已过期</span
              >
              <span class="color333 font18" v-else-if="statusFormat(data) == 17"
                >已结束</span
              >
              <span class="color333 font18" v-else-if="data.status == 7"
                >已关闭</span
              >
            </el-form-item>
          </div>
        </el-form>
        <!-- 审核按钮 -->
        <el-form
          :inline="true"
          :size="size"
          ref="filters"
          style="text-align: center"
        >
          <el-row class="search-button">
            <kt-button
              class="searchButton"
              :size="size"
              @click="submitReviewShow"
              v-if="statusFormat(data) == 11 || statusFormat(data) == 14"
              v-show="data.editFlag"
              perms="market:coupon:submit"
              label="提交审核"
            />
            <kt-button
              class="searchButton"
              :size="size"
              @click="reviewShow"
              v-if="statusFormat(data) == 12"
              v-show="data.editFlag"
              perms="market:coupon:verify"
              label="审核"
            />
            <!-- <kt-button
              class="searchButton"
              :size="size"
              @click="saveTemplateDialog"
              v-show="data.editFlag"
              perms="market:coupon:addtemp"
              label="保存为模板"
            /> -->
          </el-row>
        </el-form>
      </div>

      <!-- 促销规则部分tab -->
      <div class="tab-container tab-container-noPadding">
        <el-tabs v-model="active" type="border-card">
          <el-tab-pane label="促销规则" name="1">
            <div>
              <form class="form-horizontal">
                <div class="basicInfo">基本信息：</div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">优惠券名称：</label>
                  <div class="color333">{{ data.promName }}</div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">优惠券日期：</label>
                  <div class="color333">
                    {{ data.startTime }} 至 {{ data.endTime }}
                  </div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">优惠券搜索词：</label>
                  <div class="color333">{{ data.searchKeyword }}</div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">费用预算：</label>
                  <div class="color333">{{ data.budget }} 元</div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">预警比例：</label>
                  <div class="color333">{{ data.warningNum }} %</div>
                </div>

                <div class="basicInfo">优惠券规则：</div>
                <div class="form-group">
                  <label class="color999 font16 textColor333"
                    >金额抵扣类型：</label
                  >
                  <div class="color333" v-if="data.amountDeductType == 0">
                    商品券
                  </div>
                  <div class="color333" v-else-if="data.amountDeductType == 1">
                    运费券
                  </div>
                  <div class="color333" v-else-if="data.amountDeductType == 2">
                    代金券
                  </div>
                  <div class="color333" v-else-if="data.amountDeductType == 3">
                    话费抵用券
                  </div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">优惠方式：</label>
                  <div class="color333" v-if="data.couponMode == 0">金额券</div>
                  <div class="color333" v-else-if="data.couponMode == 1">
                    折扣券
                  </div>
                </div>

                <div class="form-group" v-if="data.couponMode == 0">
                  <label class="color999 font16 textColor333"
                    >优惠券面值：</label
                  >
                  <div class="color333">{{ data.couponAmount }}元</div>
                </div>
                <div class="form-group" v-if="data.couponMode == 1">
                  <label class="color999 font16 textColor333">优惠折扣：</label>
                  <div class="color333">{{ data.couponAmount }}折</div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">发行数量：</label>
                  <div class="color333" v-if="data.grantTotalNum == null">
                    不限制
                  </div>
                  <div class="color333" v-else-if="data.grantTotalNum != null">
                    {{ data.grantTotalNum }}张
                  </div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333"
                    >使用时间设置：</label
                  >
                  <div class="color333">
                    {{ data.couponUseStartTime }} 至 {{ data.couponUseEndTime }}
                  </div>
                </div>
                <div class="form-group" v-if="data.amountDeductType == 0">
                  <label class="color999 font16 textColor333">使用条件：</label>
                  <div class="color333">
                    满 {{ data.useTotalAmountLimit }} 元使用
                  </div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">领取限制：</label>
                  <div
                    class="color333"
                    v-if="data.idLimitNum == null || data.idLimitNum == ''"
                  >
                    不限制（每ID总共可以领取）
                  </div>
                  <div
                    class="color333"
                    v-if="data.idLimitNum != null && data.idLimitNum !== ''"
                  >
                    {{ data.idLimitNum }}张（每ID总共可以领取）
                  </div>
                  <div
                    class="color333"
                    v-if="
                      data.idLimitDayNum == null || data.idLimitDayNum == ''
                    "
                  >
                    不限制（每ID总共可以领取）
                  </div>
                  <div
                    class="color333"
                    v-if="
                      data.idLimitDayNum != null && data.idLimitDayNum !== ''
                    "
                  >
                    {{ data.idLimitDayNum }}张（每ID每日可以领取）
                  </div>
                </div>
                <div class="form-group flexBox">
                  <label class="color999 font16 textColor333 titleText"
                    >优惠券描述：</label
                  >
                  <div class="color333">{{ data.chineseDesc }}</div>
                </div>

                <div class="basicInfo">交易规则：</div>
                <div class="form-group" v-if="deptType != 3">
                  <div class="color999 font16 textColor333">是否分摊：</div>
                  <div class="color333">
                    <span v-if="data.costAllocationFlag == 1">是</span>
                    <span v-if="data.costAllocationFlag == 2">否</span>
                  </div>
                </div>
                <div
                  class="form-group"
                  v-if="data.costAllocationFlag == 1 && deptType != 3"
                >
                  <label class="color333 font16 ml32">分摊比例：</label>
                  <div
                    class="color333"
                    v-if="
                      data.parentAllocationScale != 0 &&
                      data.parentAllocationScale != ''
                    "
                  >
                    <span>母平台比例：</span>
                    <span>{{ data.parentAllocationScale }}%&nbsp;</span>
                  </div>
                  <div
                    class="color333"
                    v-if="
                      data.merchantAllocationScale != 0 &&
                      data.merchantAllocationScale != ''
                    "
                  >
                    <span>商家比例：</span>
                    <span>{{ data.merchantAllocationScale }}%&nbsp;</span>
                  </div>
                </div>

                <div class="basicInfo">触发场景：</div>
                <div class="form-group">
                  <div class="color999 font16 textColor333">触发类型：</div>
                  <div class="color333">
                    <!-- <span v-if="checkTrigger('00')">页面领取&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <span v-if="checkTrigger('40')">自动发放&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <span v-if="checkTriggerStory()">任务发放</span> -->
                    {{ data.triggerType }}
                  </div>
                </div>
                <div v-if="data.triggerScenes != null">
                  <div class="form-group">
                    <div class="color999 font16 textColor333">任务发放：</div>
                    <div class="color333">
                      <span v-html="data.triggerScenes"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="color999 font16 textColor333">发放次数：</div>
                    <div class="color333">{{ data.triggerNum }} 次</div>
                  </div>
                </div>

                <div class="basicInfo">参与条件：</div>
                <!-- <div class="form-group flexBox" v-if="deptType == 0">
                                    <label class="color999 font16 textColor333 titleText" >使用渠道：</label>
                                    <div class="color333 t_l" >
                                        <span v-for="(item, index) in data.channelCodes" :key="index">{{getChannelName(item)}}&nbsp;</span>
                                    </div>
                                </div> -->
                <div class="form-group pdl33">
                  <label class="color333 font16">新老用户：</label>
                  <div class="color333">
                    <span
                      v-for="item in (data.proUserType + '').split(',')"
                      :key="item"
                      class="ng-binding ng-scope"
                    >
                      <span v-if="item == 1"> 新用户 &nbsp; </span>
                      <span v-if="item == 2"> 老用户 &nbsp; </span>
                    </span>
                  </div>
                </div>
                <div class="form-group pdl33" v-if="data.memTypes != null">
                  <label class="color333 font16">会员类型：</label>
                  <div class="color333">
                    <span
                      v-for="item in (data.memTypes + '').split(',')"
                      :key="item"
                      class="ng-binding ng-scope"
                    >
                      <span v-if="item == 1"> 普通会员 &nbsp; </span>
                      <span v-if="item == 2"> we2000 &nbsp; </span>
                      <span v-if="item == 3"> 分期会员 &nbsp; </span>
                    </span>
                    <!-- <span ng-repeat="type in promotionDetailContent.memberTypeList" class="ng-binding ng-scope">普通会员 &nbsp;</span> -->
                  </div>
                </div>
                <div class="form-group pdl33">
                  <label class="color333 font16">渠道入口：</label>
                  <div class="color333">
                    <span
                      v-for="item in (data.channelId + '').split(',')"
                      :key="item"
                      class="ng-binding ng-scope"
                    >
                      <span v-if="item == 1"> 企业微信 &nbsp; </span>
                      <span v-if="item == 2"> xxx &nbsp; </span>
                      <span v-if="item == 3"> yyy &nbsp; </span>
                    </span>
                  </div>
                </div>
                <div class="form-group">
                  <label class="color999 font16 textColor333">使用说明：</label>
                  <div class="color333">{{ data.couponUseDesc }}</div>
                </div>
              </form>
            </div>
          </el-tab-pane>

          <el-tab-pane label="参与商品" name="4" class="text-center">
                        <productTemplate @findProductPage="findProductPage" :promType="'2'" ref="productTemplate"></productTemplate>
                    </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 提交审核弹窗 -->
    <div>
      <el-dialog
        class="el-dialog-style"
        title="提交审核"
        :visible.sync="submitReviewVisible"
        :close-on-click-modal="false"
      >
        <p class="t_c">确认提交审核?</p>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            plain
            @click="submitReviewVisible = false"
            :size="size"
            class="cancelButton"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="submitReview"
            :size="size"
            class="searchButton"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        class="el-dialog-style"
        title="审核"
        :visible.sync="reviewVisible"
        :close-on-click-modal="false"
      >
        <el-form :model="form" ref="form" :rules="formRules">
          <el-form-item class="textarea" prop="checkRemark">
            <el-input
              clearable
              v-model="form.checkRemark"
              autocomplete="off"
              placeholder="请输入审核意见"
              type="textarea"
              rows="6"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            plain
            @click="fail"
            :size="size"
            class="cancelButton"
            >不通过</el-button
          >
          <el-button
            type="primary"
            @click="success"
            :size="size"
            class="searchButton"
            >通过</el-button
          >
        </span>
      </el-dialog>

      <!-- 模板弹窗 -->
    </div>
  </div>
</template>

<script>
import merchantTemplate from "@/views/Pages/PromotionManagement/components/PromotionMerchantTemplate";
import storeTemplate from "@/views/Pages/PromotionManagement/components/PromotionStoreTemplate";
import productTemplate from "@/views/Pages/PromotionManagement/components/CouponProductTemplate";
import KtButton from "@/views/Core/KtButton";

export default {
  components: {
    merchantTemplate,
    storeTemplate,
    productTemplate,
    KtButton,
  },
  data() {
    return {
      templateDialogFormVisible: false, //模板弹窗
      templateForm: {
        templateName: "",
      }, //模板model
      promotionId: this.$route.query.promotionId,
      size: "small",
      active: "1",
      activeShop: "1",
      data: {},
      submitReviewVisible: false, //提交审核弹窗
      reviewVisible: false, //审核弹窗
      // auditRemark:null,//审核意见
      skillTimeId: "",
      responseInfoList: [],
      productList: [],
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型

      form: {
        checkRemark: "",
      },
      formRules: {
        checkRemark: [
          {
            required: true,
            message: "审核意见不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    checkTrigger(trigger) {
      if (this.data.triggerType.indexOf(trigger) != -1) {
        return true;
      } else {
        return false;
      }
    },
    /**
     * 状态格式化
     */
    statusFormat(row) {
      if (
        row.status == 1 &&
        new Date().getTime() <= new Date(row.startTime).getTime()
      ) {
        //待提交
        return 11;
      } else if (
        row.status == 2 &&
        new Date().getTime() <= new Date(row.startTime).getTime()
      ) {
        //待审核
        return 12;
      } else if (
        row.status == 11 &&
        new Date().getTime() <= new Date(row.startTime).getTime()
      ) {
        //未开始
        return 13;
      } else if (
        row.status == 4 &&
        new Date().getTime() <= new Date(row.startTime).getTime()
      ) {
        //审核未通过
        return 14;
      } else if (
        row.status == 11 &&
        new Date().getTime() >= new Date(row.startTime).getTime() &&
        new Date().getTime() <= new Date(row.endTime).getTime()
      ) {
        //进行中
        return 15;
      } else if (
        (row.status == 1 || row.status == 2 || row.status == 4) &&
        new Date().getTime() > new Date(row.startTime).getTime()
      ) {
        //已过期
        return 16;
      } else if (
        row.status == 11 &&
        new Date().getTime() > new Date(row.endTime).getTime()
      ) {
        //已结束
        return 17;
      }
    },
    /**
     * 审核弹
     */
    reviewShow() {
      this.reviewVisible = true;
    },
    /**
     * 通过审核
     */
    success() {
      this.utils.request.couponCheckCoupon(
        {
          promotionId: this.promotionId,
          updateStatus: 11,
        },
        (res) => {
          this.$message({
            message: "审核成功",
            type: "success",
          });
          // this.$set(this.data,"status",3);
          this.reviewVisible = false;
          this.findInfo();
        }
      );
    },
    /**
     * 不通过
     */
    fail() {
      // if(this.auditRemark == null || this.auditRemark == ''){
      //     this.$message({message:"请输入审核意见",type:"error"})
      //     return false;
      // }
      this.$refs.form.validate((auditRemarkE) => {
        if (auditRemarkE) {
          this.utils.request.couponCheckCoupon(
            {
              promotionId: this.promotionId,
              updateStatus: 4,
              checkRemark: this.form.checkRemark,
            },
            (res) => {
              this.$message({
                message: "审核成功",
                type: "success",
              });
              // this.$set(this.data,"status",4);
              this.reviewVisible = false;
              this.findInfo();
            }
          );
        }
      });
    },
    /**
     * 提交审核
     */
    submitReview() {
      this.utils.request.couponCheckCoupon(
        {
          promotionId: this.promotionId,
          updateStatus: 2,
        },
        (res) => {
          if (res.code == "0000" && res.data) {
            this.$message({
              message: "提交审核成功",
              type: "success",
            });
            // this.$set(this.data,"status",2);
            this.submitReviewVisible = false;
            this.findInfo();
          } else {
            this.$message({
              message: res.msg || "提交审核失败",
              type: "error",
            });
            this.submitReviewVisible = false;
          }
        }
      );
    },
    /**
     * 提交审核弹窗
     */
    submitReviewShow() {
      this.submitReviewVisible = true;
    },
    /**
     * 查询绑定的商品数据
     * 分页 参数 data.start data.limit
     * */
    findProductPage(data) {
      //TDOD
      // this.utils.request.

      //回调子组件方法 渲染表格
      //返回的数据 res.rows res.total
      this.utils.request.couponQueryGoods(
        {
          promotionId: this.promotionId,
        },
        (res) => {
          this.$refs.productTemplate.renderProductTable({
            rows: res.data.goodsInfoList,
            total: res.data.goodsInfoList.length,
          });
        }
      );
    },
    findInfo() {
      this.utils.request.couponQueryConfigByPromotionId(
        {
          promotionId: this.promotionId,
        },
        (res) => {
          this.data = res.data;
        //   if (res.data.channelCodes != null) {
        //     if (res.data.channelCodes.indexOf("179") == -1) {
        //       res.data.channelCodes.unshift("179");
        //     }
        //     this.getLevelList(res.data.channelCodes);
        //   }

          this.utils.request.couponQueryTrigger(
            {
              promotionId: this.promotionId,
            },
            (res) => {
              if (res.code == "0000") {
                let triggerType = res.data.triggerType;
                this.data.triggerNum = res.data.triggerNum;
                triggerType.forEach((trigger) => {
                  let triggerIds = trigger.split(",");
                  triggerIds.forEach((item) => {
                    if (item == "10") {
                      this.$set(
                        this.data,
                        "triggerScenes",
                        "注册&nbsp;&nbsp;&nbsp;&nbsp;"
                      );
                    } else if (item == "11") {
                      this.$set(
                        this.data,
                        "triggerScenes",
                        (this.data.triggerScenes == null
                          ? ""
                          : this.data.triggerScenes) +
                          "完善个人信息&nbsp;&nbsp;&nbsp;&nbsp;"
                      );
                    } else if (item == "31") {
                      this.$set(
                        this.data,
                        "triggerScenes",
                        (this.data.triggerScenes == null
                          ? ""
                          : this.data.triggerScenes) +
                          "签到&nbsp;&nbsp;&nbsp;&nbsp;"
                      );
                    } else if (item == "32") {
                      this.$set(
                        this.data,
                        "triggerScenes",
                        (this.data.triggerScenes == null
                          ? ""
                          : this.data.triggerScenes) +
                          "收藏商户&nbsp;&nbsp;&nbsp;&nbsp;"
                      );
                    }
                  });
                });
              }
            }
          );
          if (this.checkTrigger("00")) {
            this.$set(this.data, "triggerType", "页面领取");
          } else if (this.checkTrigger("40")) {
            this.$set(this.data, "triggerType", "自动发放");
          } else {
            this.$set(this.data, "triggerType", "任务发放");
          }
        }
      );
    },
  },
  created() {
    // if (this.deptType == 0) {
    //   this.utils.request.queryChildList({}, (res) => {
    //     if (res.code == "0000" && res.data && res.data.length > 0) {
    //       // channel.children = ;
    //       res.data.forEach((item) => {
    //         this.channelList.push(item);
    //       });
    //     }
    //   });
    // }
  },
  mounted() {
    this.findInfo();
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/css/public.scss";

.color999 {
  margin: 0 !important;
}

.textColor333 {
  color: #333 !important;
}

.w80 {
  width: 80px;
}

.pdl30 {
  padding-left: 30px;
}

.lh25 {
  line-height: 25px;
}

.pdl60 {
  padding-left: 60px;
}

.pdl33 {
  padding-left: 33px;
}

.w144 {
  width: 144px;
}

.oe {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.width100 {
  width: 97px;
}

.width120 {
  width: 150px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml33 {
  margin-left: 33px;
}

.pdl30 {
  padding-left: 30px;
}

.pdt20 {
  padding-top: 20px;
}
</style>
